<template>
  <div class="app-container">
    <nav class="bottom-nav">
      <router-link to="/route-planner" class="nav-item" :class="{ active: $route.path === '/route-planner' }">
        <img :src="$route.path === '/route-planner' ? '/images/route-active.png' : '/images/route.png'" alt="路径规划">
        <span>路径规划</span>
      </router-link>
      <router-link to="/navigation" class="nav-item" :class="{ active: $route.path === '/navigation' }">
        <img src="/images/route.png" alt="导航">
        <span>导航</span>
      </router-link>
      <router-link to="/music-library" class="nav-item" :class="{ active: $route.path === '/music-library' }">
        <img :src="$route.path === '/music-library' ? '/images/music-active.png' : '/images/music.png'" alt="音乐库">
        <span>音乐库</span>
      </router-link>
      <router-link to="/footprint" class="nav-item" :class="{ active: $route.path === '/footprint' }">
        <img :src="$route.path === '/footprint' ? '/images/footprint-active.png' : '/images/footprint.png'" alt="足迹">
        <span>足迹</span>
      </router-link>
    </nav>
    <main class="main-content">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
